<template>
    <div class="box" ref="dom">
        <div class="box-center">
            <div class="box-one"></div>
            <div class="box-two">
                <div class="box-two-box">
                    <div class="box-two-one border-bottom"><span class="iconfont icon">&#xe680;</span>本地音乐(7)</div>
                    <div class="box-two-one border-bottom"><span class="iconfont icon">&#xe610;</span>最近播放(8)</div>
                    <div class="box-two-one border-bottom"><span class="iconfont icon">&#xe688;</span>下载管理(3)</div>
                    <div class="box-two-one border-bottom"><span class="iconfont icon">&#xe61c;</span>我的电台(15)</div>
                    <div class="box-two-one border-bottom"><span class="iconfont icon">&#xe666;</span>我的收藏(105)</div>
                </div>
            </div>
            <div class="box-three">
                <div class="box-three-one border-bottom">
                <div class="box-three-one-img"><img src="../../../common/img/10.jpg"/></div>
                <div class="box-three-one-text">木头机器人</div>
                <div class="box-three-one-vip">开通会员</div>
                </div>
                <div class="box-three-two">
                    <div class="box-three-two-fuli">福利</div>
                    <div class="box-three-two-text">黑胶vip&nbsp;首开低至9元</div>
                    <div class="box-three-two-chakan">查看<span class="iconfont">&#xe64a;</span></div>
                </div>
            </div>
            <div class="box-four">
            <div><span class="iconfont box-four-left">&#xe695;</span>创建的歌单(01)<span class="iconfont box-four-right">&#xeb8d;</span></div>
            </div>
            <div class="box-five">
            <div class="box-five-img"><img src="../../../common/img/9.jpg"/></div>
            <div class="box-five-text">
                <p class="box-five-text-one">我喜欢的音乐</p>
                <p class="box-five-text-two">112首</p>
            </div>
            <div class="box-five-text-more"><span class="iconfont">&#xeb76;</span></div>
            <div class="box-five-text-clera"></div>
            </div>
            <div class="box-six">
            <div><span class="iconfont box-six-left">&#xe695;</span>创建的歌单(01)<span class="iconfont box-six-right">&#xeb8d;</span></div>
            </div>
            <div class="box-seven">
                <div class="box-seven-one">
                    <div class="box-seven-img"><img src="../../../common/img/9.jpg"/></div>
                    <div class="box-five-text">
                    <p class="box-five-text-one">我喜欢的音乐</p>
                    <p class="box-five-text-two">112首</p>
                    </div>
                <div class="box-five-text-more"><span class="iconfont">&#xeb76;</span></div>
                <div class="box-seven-clear"></div>
                </div>
                <div class="box-seven-one">
                    <div class="box-seven-img"><img src="../../../common/img/9.jpg"/></div>
                    <div class="box-five-text">
                    <p class="box-five-text-one">我喜欢的音乐</p>
                    <p class="box-five-text-two">112首</p>
                    </div>
                <div class="box-five-text-more"><span class="iconfont">&#xeb76;</span></div>
                <div class="box-seven-clear"></div>
                </div>
                <div class="box-seven-one">
                    <div class="box-seven-img"><img src="../../../common/img/9.jpg"/></div>
                    <div class="box-five-text">
                    <p class="box-five-text-one">我喜欢的音乐</p>
                    <p class="box-five-text-two">112首</p>
                    </div>
                <div class="box-five-text-more"><span class="iconfont">&#xeb76;</span></div>
                <div class="box-seven-clear"></div>
                </div>
                <div class="box-seven-one">
                    <div class="box-seven-img"><img src="../../../common/img/9.jpg"/></div>
                    <div class="box-five-text">
                    <p class="box-five-text-one">我喜欢的音乐</p>
                    <p class="box-five-text-two">112首</p>
                    </div>
                <div class="box-five-text-more"><span class="iconfont">&#xeb76;</span></div>
                <div class="box-seven-clear"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'mymusic',
  mounted () {
    this.scroll = new Bscroll(this.$refs.dom)
  }
}
</script>

<style lang="stylus" scoped>
 .border-bottom
  &:before
   border-color: #dddddd
.box
 height 11.54rem
 overflow hidden
 .box-one
  height 1.2rem
  background-color red
 .box-two
  height 7.2rem
  background-color #ffffff
  .box-two-box
   margin-left .2rem
   margin-top 1.2rem
   .box-two-one
    height 1.2rem
    line-height 1.2rem
    font-size .4rem
    .icon
     font-size .5rem
     margin-right .3rem
     color red
 .box-three
  position absolute
  top 1rem
  left .2rem
  right .2rem
  .box-three-one
   height 1.4rem
   background-color #ffffff
   border-top-left-radius .2rem
   border-top-right-radius .2rem
   line-height 1.4rem
   .box-three-one-vip
    position absolute
    top .2rem
    right .2rem
    border .02rem solid red
    box-sizing border-box
    padding .1.5rem
    width 1.5rem
    height .8rem
    font-size .2.1rem
    text-align center
    line-height .8rem
    color red
    border-radius 50%
   .box-three-one-img
    width .8rem
    height .8rem
    float left
    margin-left .2rem
    margin-right .3rem
   .box-three-one-img img
    width 100%
    height 100%
    border-radius 50%
   .box-three-one-text
    font-size .25rem
  .box-three-two
   width 100%
   height .8rem
   background-color #fff
   line-height .8rem
   box-shadow 0rem .08rem 0rem #eeeeee
   .box-three-two-fuli
    font-size .23rem
    width .8rem
    height .3rem
    position absolute
    top 1.6rem
    left .2rem
    border .02rem solid red
    line-height .4rem
    text-align center
   .box-three-two-text
    margin-left 1.3rem
    font-size .23rem
   .box-three-two-chakan
    position absolute
    top 1.4rem
    right .2rem
    font-size .25rem
   .box-three-two-chakan span
    font-size .23rem
    margin-left .1rem
 .box-four
  height .5rem
  background-color #eeeeee
  margin-top -1.1rem
  line-height .5rem
  .box-four-right
   float right
   margin-right .2rem
  .box-four-left
   margin-right .2rem
   margin-left .1rem
 .box-five-img
  width 1.3rem
  height 1.3rem
  box-sizing border-box
  padding-top .2rem
  padding-left .2rem
  float left
 .box-five img
  width 100%
  height 100%
 .box-five-text
  float left
  box-sizing border-box
  padding-top .4rem
  padding-left .5rem
  .box-five-text-one
   font-size .31rem
   margin-bottom .2rem
  .box-five-text-two
   font-size .24rem
 .box-five-text-more
  float right
  margin-top .6rem
 .box-five-text-more span
  font-size .4rem
  margin-right .2rem
 .box-five-text-clera
  clear both
 .box-six
  height .5rem
  background-color #eeeeee
  line-height .5rem
  margin-top .2rem
  .box-six-right
   float right
   margin-right .2rem
  .box-six-left
   margin-right .2rem
   margin-left .1rem
 .box-seven-one
  .box-seven-img
   width 1.3rem
   height 1.3rem
   box-sizing border-box
   padding-top .2rem
   padding-left .2rem
   float left
  .box-seven-img img
   width 100%
   height 100%
  .box-seven-clear
   clear both
</style>
